<template>
    <div>
      <div class="mb-3">
        <label for="name" class="form-label">姓名</label>
        <input v-model="name" type="text" class="form-control" id="name">
      </div>
      <div class="mb-3">
        <label for="contact" class="form-label">联系方式</label>
        <input v-model="contact" type="text" class="form-control" id="contact">
      </div>
      <div class="mb-3">
        <label for="question" class="form-label">提问的问题</label>
        <textarea v-model="question" class="form-control" id="question"></textarea>
      </div>
      <button @click="sendWebhookRequest" class="btn btn-primary" type="button">发送 Webhook 请求</button>
      <div v-if="response" class="alert alert-info mt-3">{{ response }}</div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        response: null,
        name: '',
        contact: '',
        question: '',
      };
    },
    methods: {
      sendWebhookRequest() {
        // 验证所有字段是否都已填写
        if (!this.name || !this.contact || !this.question) {
          this.response = "请填写所有必填字段";
          return;
        }
  
        // 整理用户输入的信息为一个参数param
        const param = `名字是-${this.name}-----联系方式-${this.contact}----反馈是-${this.question}`;
        // 构建Webhook URL并发送GET请求
        const webhookURL = `http://1.15.7.2:23260/hook?access_key=J3J9VdbtMVQIphqy9ZZtr9yten6XMa7xNXRM7DvqxbHXLA3G&param=${param}`;
  
        fetch(webhookURL, {
          method: 'GET',
          mode: 'no-cors',
        })
          .then((response) => response.text())
          .then((data) => {
            this.response = data;
          })
          .catch((error) => {
            this.response = `发生错误: ${error}`;
          });
      },
    },
  };
  </script>
  